<template>
	<view class="playPage">
		<!-- 标题 -->
		<shopro-navbar
			back-icon-color="#020202"
			:background="{ background: '#fff' }"
			@backHandler="goBack"
			:backTextStyle="{
				color: '#020202',
				fontSize: '36rpx',
				fontWeight: '400',
			}"
			:isBack="true">
			<view slot="content" class="u-flex nav-wrap">
				<view class="nav-item">课程名称</view>
			</view>
		</shopro-navbar>
		<view class="playContent">
			<view id="J_prismPlayer"></view>

			<view class="video-sp">
				<video
					id="myVideo"
					:src="current_file"
					controls
					v-if="type == '1'"></video>
				<!-- <aliPlayer style="width:100%;" :source="current_file" ref="telText" :autoplay="true" v-if="type=='1'">
				</aliPlayer> -->
			</view>

			<!-- <zaudio :info="audiolist" @transferUser="translateText" @transferUser1="translateText1" ref='child'
				>
			</zaudio> -->

			<audio
				:author="audiolist.title"
				:name="audiolist.name"
				:src="audiolist.src"
				id="myAudio"
				controls
				loop
				v-if="type == '3'"
				style="width: 100%"></audio>
			<view class="" v-if="type == '2'">
				<view v-html="content"></view>
			</view>
			<view class="playbox">
				<view class="title">{{ detajs.title }}</view>
				<view class="smallTitle">共{{ dataList.length }}节</view>
				<view class="playline"></view>
				<view
					class="biaoti"
					v-for="(item, index) in dataList"
					:key="index"
					@click="goPlay(item, index)"
					:class="current == index ? 'biaotiavtive' : ''">
					<view class="label">
						{{
							item.type == "1"
								? "视频"
								: item.type == "3"
								? "音频"
								: "图文"
						}}
					</view>
					{{ item.title }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
import uParse from "@/components/uParse/src/wxParse.vue";
import zaudio from "@/components/audio/zaudio";
import aliPlayer from "@/components/aliPlayer/aliPlayer.vue";
// import {nextTick} from "@/unpackage/dist/dev/mp-weixin/common/vendor";
export default {
	components: {
		uParse,
		zaudio,
		aliPlayer,
	},
	data() {
		return {
			newID: "",
			dataList: [],
			poster: "",
			current: 0,
			type: "1",
			video_detail: {},
			current_file: "",
			audiolist: {}, //音频
			src: "",
			content: "",
			detajs: {},
		};
	},
	props: {},
	onLoad(options) {
		this.newID = options.id;
		this.$nextTick(() => {
			this.getDetail(options.id);
		});
	},
	computed: {},
	created() {},
	mounted() {},
	onReady: function (res) {
		// wx.createAudioContext('myAudio')
	},

	methods: {
		goPlay(val, i) {
			this.current = i;
			this.poster = val.media_cover;
			this.type = val.type;

			// 音频
			if (this.type == "3") {
				this.$new_http("finance.aliplay", {
					id: val.id,
				}).then((res) => {
					this.audiolist = {
						src: res.data.PlayURL,
						title: "",
						name: val.title,
					};
				});
			} else if (this.type == "1") {
				this.$new_http("finance.aliplay", {
					id: val.id,
				}).then((res) => {
					this.current_file = res.data.PlayURL;
				});
			} else {
				this.content = val.content;
			}
		},
		getDetail(val) {
			//视频
			this.$new_http("finance.classList", {
				id: val,
			}).then((res) => {
				this.detajs = res.data.course;
				this.dataList = res.data.list;
				if (res.data.list.length > 0) {
					this.type = res.data.list[0].type;

					// 视频
					if (this.type == "1") {
						this.$new_http("finance.aliplay", {
							id: res.data.list[0].id,
						}).then((res) => {
							this.current_file = res.data.PlayURL;
							// console.log(res.data.PlayURL, 123);
						});
					} else if (this.type == "3") {
						//音频
						this.$new_http("finance.aliplay", {
							id: res.data.list[0].id,
						}).then((res) => {
							console.log(res, 99);
							this.audiolist = {
								src: res.data.PlayURL,
								title: "",
								name: val.title,
							};
						});
					} else {
						this.content = res.data.list[0].content;
					}
				}
			});
		},
	},
};
</script>

<style lang="scss">
.playPage {
	height: 100vh;
	background: #f7f8fa;
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);

	.nav-wrap {
		width: 100%;
		text-align: center;
	}

	.nav-item {
		width: 100%;
		font-size: 32rpx;
	}

	.success {
		margin: 182rpx auto 0;
		display: flex;
		justify-content: center;

		.imgs {
			width: 320rpx;
		}
	}

	.playContent {
		padding: 24rpx 32rpx;

		#myVideo {
			width: 100%;
		}

		.playbox {
			width: 100%;
			margin-top: 24rpx;
			height: 428rpx;
			background: #ffffff;
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(74, 144, 246, 0.06);
			border-radius: 24rpx;
			padding: 0 40rpx;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
				padding-top: 40rpx;
			}

			.smallTitle {
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				margin-top: 12rpx;
			}

			.playline {
				width: 100%;
				height: 2rpx;
				background: #d1d2d4;
				margin-top: 24rpx;
			}

			.biaotiavtive {
				color: #ed861f !important;

				.label {
					background: rgba(237, 134, 31, 0.1) !important;
					border-radius: 8rpx;
					border: 1rpx solid #ed861f !important;
					color: #ed861f !important;
				}
			}

			.biaoti {
				display: flex;
				margin-top: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;

				.label {
					width: 68rpx;
					height: 36rpx;
					background: rgba(209, 210, 212, 0.1);
					border-radius: 8rpx;
					border: 1rpx solid #d1d2d4;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
					line-height: 36rpx;
					text-align: center;
					margin-right: 16rpx;
				}
			}
		}
	}
}
</style>
